<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../static/js/vue.js"></script>
    <style>
        td {
            height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="app">
        <div>
            名称: <input type="text" v-model.trim="gName">
            数量: <input type="text" v-model.number="gNum">
            是否上架: <select v-model="gState">
                <option value="true">上架</option>
                <option value="false">下架</option>
            </select>
            <button @click="addGoods">新增商品</button>
        </div>
        <table border="1px" width="800px">
            <thead>
                <th><input type="checkbox"  @change="checkAll" v-model="allState"></th>
                <th>编号</th>
                <th>名称</th>
                <th>状态</th>
                <th>数量</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goods">
                    <td><input type="checkbox" v-model="item.isChecked" @change="reverseChk"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <span v-if="item.state">上架状态</span>
                        <span v-else>下架状态</span>
                    </td>
                    <td><button @click="add(item.id)">+</button><span>{{item.num}}</span><button
                            @click="sub(item.id,index)">-</button></td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button v-if="item.state" @click="item.state=!item.state">点击下架</button>
                        <button v-else @click="item.state=!item.state">点击上架</button>
                    </td>
                </tr>
            </tbody>
        </table>
       <!--  <span>选中的商品的总数量：{{count}}</span> -->
        <span>选中的商品的总数量：{{xxxx}}</span>
    </div>

</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            goods: [
                { id: 1, name: '苹果', state: true, num: 5, isChecked: false },
                { id: 2, name: '香蕉', state: false, num: 5, isChecked: false },
                { id: 3, name: '橘子', state: true, num: 5, isChecked: true },
                { id: 4, name: '甘蔗', state: true, num: 5, isChecked: false },
                { id: 5, name: '荔枝', state: true, num: 5, isChecked: false }
            ],
            //定义商品名称
            gName: '',
            //商品的数量
            gNum: 0,
            //上下架的状态
            gState: true,
            //商品id
            ids: 5,
            //全选状态
            allState: false,
        },
        methods: {
            //定义新增商品的方法/函数
            addGoods(){
                //1.先创建一个商品对象
                let obj = {
                    id:++this.ids,
                    name:this.gName,
                    num:this.gNum,
                    state:this.gState
                }
                //2.把数据整体追加到 data中goods中
                this.goods.push(obj);
            },
            //定义删除按钮
            del(i){
                //方式一：DOM方式  不推荐使用
                //e.target.parentElement.parentElement.remove()
                //e.target.parentNode.parentNode.remove()

                //方式二：从数据的角度来删除
                /* this.goods.forEach((item,index) => {
                    if(item.id==i){
                        //index表示删除的下标  1 表示删除的个数
                        this.goods.splice(index,1)
                    }
                }); */
                this.goods.forEach((element,index) => {
                    if(element.id==i){
                        this.goods.splice(index,1)
                    }
                });
                //使用数组的filter方法做过滤操作 拿到符合条件的所有结果
               /*  this.goods = this.goods.filter(item=>item.id!=i) */
            },
            //定义修改状态的函数
            /* changeState(i){
                this.goods.forEach((item) => {
                    if(item.id==i){
                        //index表示删除的下标  1 表示删除的个数
                        item.state = !item.state
                    }
                });
            } */
            //定义全选事件
            checkAll(){
                //全选：要把购物车中所有的选项的isChecked属性值都变成跟全选框一致
                this.goods.forEach((item) => {
                    item.isChecked = this.allState
                });
            },
            //定义反选事件
            reverseChk(){
                //点击每一个复选框时，都要对所有复选框做遍历，看里边是否存在isChecked为false的选项
                //只要有false  那么allState也等于false 
                this.allState = this.goods.every(item=>item.isChecked==true)
            },
            //定义数量的增加方法
            add(i){
                this.goods.forEach((item) => {
                    if(item.id==i){
                        item.num+=1
                    }
                });
            },
            //定义数量的减少方法
            sub(i,a){
                //如果数量为1的  就直接return  
                if(this.goods[a].num==1) return ;
                
                this.goods.forEach((item) => {
                    if(item.id==i){
                        item.num-=1
                    }
                });
            }
        },

        computed: {
             //计算选中结算的商品总数量
            /*  count(){
                //先 筛选 出被选中的商品 再 计算中总数量赋值给count 
                return this.goods.filter(item=>item.isChecked==true).reduce((total,item)=>total+=item.num,0)
            } */
             xxxx(){
                 var total=0;
                 this.goods.forEach(element => {
                     if(element.isChecked==true){
                        total+=element.num
                     }
                 });

                 return total
             }
        }


    })
</script>

</html>